
<style scoped lang="less">
ui,
li {
  list-style-type: none;
}
.attendance {
  height: 100%;
  overflow: hidden;
  .left_tree {
    padding: 20px;
    height: 100%;
    overflow: scroll;
    h2 {
      padding-bottom: 20px;
    }
  }
  .content {
    padding: 0 20px 0 20px;
  }
  .content-top {
    height: 70px;
    padding: 20px;
  }
  .footer {
    padding: 20px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
  }
  .line-container {
    height: 50%;
    background: #4545;
  }
  .line-up,
  .line-down {
    height: 50%;
    margin: 0;
  }
  .line-up li {
    //   float: left;
    flex-grow: 1;
    width: 100%;
    position: relative;
  }
  .line-up ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    h2 {
      writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
      writing-mode: tb-lr; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
      font-weight: 500;
      text-align: center;
    }
    span {
      display: block;
      background: #000;
    }
    .item-title {
      width: 1em;
      margin: auto;
    }
    .dot {
      // height: 1em;;
      height: 1em;
      width: 1em;
      margin: auto;
      // background: #000;
      border-radius: 50%;
      border: 1px solid #000;
    }
    #road {
      position: absolute;
    }
  }
  .station {
    fill: #aaa;
    stroke: #f5f5f5;
    stroke-width: 2;
    r: 3;
    fill: #feb538;
  }
  .station::before {
    content: "aaa";
  }
  .track {
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #feb538;
    fill: none;
  }
  .carList{
    span{
      display:block;
      text-align: center;
    }
  }
}
</style>
<template>
  <div class="attendance" ref="attendance">
    <Row :style="{height:'100%'}">
      <Col span="4" :style="{height:'100%'}">
        <div class="left_tree">
          <h2>选择线路:</h2>
          <Tree :data="treeData" empty-text @on-select-change="selectTree"></Tree>
        </div>
      </Col>
      <Col span="20" :style="{height:'100%'}">
        <!-- 实时线路图 -->
        <div class="line-container">
          <!-- 上行线路 -->
          <div class="line-up">
            <h2>上行</h2>
            <svg
              id="stopContainer"
              class="metro-svg"
              version="1.1"
              baseProfile="full"
              width="100%"
              height="200"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path class="track line4" :d="linePath"></path>
              <!-- Line 1 Stations -->
              <g v-for="item in getStopList">
                <text :x="item.cx" y="0" style="font-size:10px; writing-mode: tb;">垂直文字</text>
                <circle
                  @click="handlClick"
                  class="station line1"
                  :cx="item.cx"
                  :cy="item.cy"
                  datatype="asdf"
                  r="2"
                  onClick="handlClick"
                ></circle>
              </g>
            </svg>
          </div>
          <!-- 下行下路 -->
          <div class="line-down">
            <h2>下行</h2>
            <svg
              id="stopContainer"
              class="metro-svg"
              version="1.1"
              baseProfile="full"
              width="100%"
              height="200"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path class="track line4" :d="linePathBot"></path>
              <!-- Line 1 Stations -->
              <g v-for="item in getStopListBot">
                <text :x="item.cx" y="80" style="font-size:10px; writing-mode: tb;">垂直文字</text>
                <circle
                  @click="handlClick"
                  class="station line1"
                  :cx="item.cx"
                  :cy="item.cy"
                  datatype="asdf"
                  r="2"
                  onClick="handlClick"
                ></circle>
              </g>
            </svg>
            <div class="carList">
                <div class="carItem">
                  <span>11:24</span>
                  <span>车</span>
                </div>
            </div>
          </div>
        </div>
      </Col>
    </Row>

    <!-- 选择车辆 -->
    <!-- <ChooseCar/> -->
  </div>
</template>

<script>
import commonService from "../../utils/services/commonService";
import util from "../../utils/util";
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import moment from "moment";
export default {
  data() {
    return {
      treeData: [],
      a: 10,
      datas: [],
      drawWidth: 1398, //线路容器宽度
      lineLastX: 1000, //直线最后一个
      linePath: "", //直线最后一个
      linePathBot: "",
      columns1: [
        {
          title: "序号",
          key: "name",
          render: (h, r) => {
            return h("span", r.index + 1);
          }
        },
        {
          title: "班次名称",
          key: "shiftName"
        },
        {
          title: "班次类型",
          key: "shiftType"
        },
        {
          title: "车辆",
          key: "busId"
        },
        {
          title: "驾驶员",
          key: "driverName"
        },
        {
          title: "乘务员",
          key: "stewardName"
        },
        {
          title: "车次数",
          key: "tripCount"
        },
        {
          title: "计划上班",
          key: "timeStart"
        },
        {
          title: "计划下班",
          key: "timeEnd"
        },
        {
          title: "实际上班（驾）",
          key: "driverStart"
        },
        {
          title: "实际下班（驾）",
          key: "driverEnd"
        },
        {
          title: "实际上班（乘）",
          key: "stewardStart"
        },
        {
          title: "实际下班（乘）",
          key: "stewardEnd"
        },
        {
          title: "操作",
          key: "address",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.editClass(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "复制"
              )
            ]);
          }
        }
      ],
      data1: []
    };
  },
  beforeMount() {
    ///获取组织树
    commonService.getTreeList().then(data => {
      this.treeData = util.transformTree(data.data);
    });
    for (var i = 0; i < 50; i++) {
      this.datas.push("站点" + (i + 1));
    }
  },
  mounted() {
    this.drawWidth = document.getElementById("stopContainer").clientWidth;
    setTimeout(() => {
      this.drawWidth = document.getElementById("stopContainer").clientWidth;
      console.log(this.drawWidth);
    }, 500);
  },
  methods: {
    selectTree: function(val) {
      var item = val[0];
      if (item && item.type === 4) {
        var param = {
          lineId: item.id,
          runDate: moment().format("YYYY-MM-DD")
        };
        //设置当前选中id
        this.$store.dispatch("attendance/setItem_act", {
          key: "curLine",
          value: item.id
        });
        this.$store.dispatch("attendance/setItem_act", {
          key: "teamIds",
          value: [item.parentId]
        });
        this.getList(param);
      }
      return false;
    },
    //添加班次
    addClass: function(e) {
      this.$store.dispatch("attendance/setItem_act", {
        key: "isShowAdd",
        value: true
      });
    },
    handlClick: function(e) {},
    //编辑班次
    editClass: function(item) {
      this.$store.dispatch("attendance/setItem_act", {
        key: "isShowEdit",
        value: true
      });
      this.$store.dispatch("attendance/setItem_act", {
        key: "curSelClass",
        value: item
      });
      this.$refs.editClass.setdata(); //设置初始值
    },
    getList: function(param) {
      //获取班次列表
      this.$store.dispatch("attendance/setShiftList_act", param);
    }
  },
  //计算属性
  computed: {
    ...mapState({
      //这里的...是超引用，ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值
      shiftList: state => state.attendance.shiftList, //注意这些与上面的区别就是state.footerStatus,
      shiftLoading: state => state.attendance.shiftLoading,
      curLine: state => state.attendance.curLine
      //里面定义的showFooter是指footerStatus.js里state的showFooter
      //你也可以用下面的mapGetters来获取isShow的值，貌似下面的更简洁
      /*...mapGetters('footerStatus',{ //footerStatus指的是modules文件夹下的footerStatus.js模块
         isShow:'isShow' //第一个isShow是我自定义的只要对应template里v-if="isShow"就行，
                         //第二个isShow是对应的footerStatus.js里的getters里的isShow
      })*/
    }),
    getStopList: function() {
      let len = this.datas.length;
      let interval = this.drawWidth / len;
      let cx = -interval + 12,
        cy = 60;
      return this.datas.map((item, index) => {
        cx += interval;
        if (index == len - 1) {
          let lasty = cy + 40;
          let lineLastX = cx - interval;
          this.lineLastY = lasty;
          this.linePath =
            "M 0 60 L " +
            lineLastX +
            " 60 Q " +
            (lineLastX + interval) +
            " 60 " +
            (lineLastX + interval) +
            " 100 ";
          return {
            cx: lineLastX + interval,
            cy: 100
          };
        }
        return {
          cx: cx,
          cy: cy
        };
      });
    },
    getStopListBot: function() {
      let len = this.datas.length;
      let interval = this.drawWidth / len;
      let cx = -interval + 12,
        cy = 60;
      return this.datas.map((item, index) => {
        cx += interval;
        if (index == len - 1) {
          let lasty = cy + 40;
          let lineLastX = cx - interval;
          this.lineLastY = lasty;
          this.linePathBot =
            "M 0 60 L " +
            lineLastX +
            " 60 Q " +
            (lineLastX + interval) +
            " 60 " +
            (lineLastX + interval) +
            " 20 ";
          return {
            cx: lineLastX + interval,
            cy: 20
          };
        }
        return {
          cx: cx,
          cy: cy
        };
      });
    }
  },
  components: {}
};
</script>
